<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="selectGrantCountList()"> 
      <el-form-item>
        <el-button
          v-if="isAuth('generator:insuranceinfo:save')"
          type="primary"
          @click="addOrUpdateHandle()"
        >新增</el-button>
        <!-- <el-button type="warning" @click="leadingOut()">导出</el-button>
        <el-button type="success" @click="download()">下载模板</el-button> -->
        <!-- <el-button v-if="isAuth('generator:insuranceinfo:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> -->
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;"
    >
      <!-- <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="insuranceInfoId"
        header-align="center"
        align="center"
        label="保险信息id">
      </el-table-column>-->
      <el-table-column prop="insuranceTime" header-align="center" align="center" label="缴纳时间"></el-table-column>
      <el-table-column prop="insuranceName" header-align="center" align="center" label="名称"></el-table-column>
      <el-table-column header-align="center" align="center" label="缴纳人数">
        <template slot-scope="scope">
          {{scope.row.payCount === null ? '无' : scope.row.payCount}}
        </template>
      </el-table-column>
      <el-table-column  header-align="center" align="center" label="缴纳总额">
        <template slot-scope="scope">
          {{scope.row.payTotal === null ? '无' : scope.row.payTotal}}
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="createUserId"
        header-align="center"
        align="center"
        label="创建人">
      </el-table-column>
      <el-table-column
        prop="affiliatedCompanyId"
        header-align="center"
        align="center"
        label="所属公司">
      </el-table-column>
      <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        label="创建时间">
      </el-table-column>-->
      <el-table-column fixed="right" header-align="center" align="center" width="200" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="addOrUpdateHandle(scope.row.insuranceInfoId)"
          >修改</el-button>
          <el-button type="text" size="small" @click="detailsHandle(scope.row.insuranceInfoId)">查看详情</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.insuranceInfoId)">删除</el-button>
          <el-upload
            class="upload-demo"
            :action="actionurl"
            :data="{insuranceInfoId: scope.row.insuranceInfoId}"
            :headers="Authorization"
            :on-preview="handlePreview"
            :on-success="uploadsuccess"
            :before-remove="beforeRemove"
            :show-file-list="false"
            multiple
            :limit="1"
            :file-list="fileList"
          >
            <el-button size="small" type="text">导入社保</el-button>
          </el-upload>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="selectGrantCountList"></add-or-update>
    <el-dialog title="社保详细" :visible.sync="salaryinfodialogVisible" width="80%">
      <insurancedetails ref="insurancedetails"></insurancedetails>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import AddOrUpdate from "./insuranceinfo-add-or-update";
import insurancedetails from "./insurancedetails";
export default {
  data() {
    return {
      dataForm: {
        key: ""
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      salaryinfodialogVisible: false,
      fileList: [],
      Authorization: { token: Vue.cookie.get("token") },
      actionurl: this.$http.adornUrl(
        "/generator/insurancedetails/importInsurance"
      ),
      selectPayCountListBox: [],
      selectPayTotalListBox: []
    };
  },
  components: {
    AddOrUpdate,
    insurancedetails
  },
  activated() {
    // this.getDataList();
    this.selectGrantCountList()
  },
  methods: {
    selectGrantCountList() {
      var _this = this
      this.$http({
        url: this.$http.adornUrl("/generator/insuranceinfo/selectPayCountList"),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
            _this.selectPayCountListBox = data.selectPayCountList
            this.$http({
              url: this.$http.adornUrl("/generator/insuranceinfo/selectPayTotalList"),
              method: "get"
            }).then(({ data }) => {
              if (data && data.code === 0) {
                  _this.selectPayTotalListBox = data.selectPayTotalList
                  _this.$nextTick(function(){
                    _this.getDataList()
                  });
                } else {
                  this.$message.error(data.msg);
                }
            });
          } else {
            this.$message.error(data.msg);
          }
      });
    },
    // 获取数据列表
    getDataList() {
      var _this = this
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/generator/insuranceinfo/list"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          getDataList: this.dataForm.key
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          _this.totalPage = data.page.totalCount;
          data.page.list.forEach(function(value, index, array) {
            value.payCount = null
            value.payTotal = null
            _this.selectPayCountListBox.forEach(function(v, i, a) {
              if (v.insuranceInfoId === value.insuranceInfoId) {
                value.payCount = v.pc
              }
            })
            _this.selectPayTotalListBox.forEach(function(v, i, a) {
              if (v.insuranceInfoId === value.insuranceInfoId) {
                value.payTotal = v.pt
              }
            })
          })
          _this.dataList = data.page.list;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.selectGrantCountList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.selectGrantCountList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 详情
    detailsHandle(id) {
      var _this = this;
      this.salaryinfodialogVisible = true;
      this.$nextTick(() => {
        _this.detailsBox = false;
        this.$refs.insurancedetails.init(id, 1);
      });
    },
    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
            return item.insuranceInfoId;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl("/generator/insuranceinfo/delete"),
          method: "post",
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.selectGrantCountList();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    uploadsuccess(response, file, fileList) {
      if (response === "success") {
        this.$message({
          message: "导入成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.selectGrantCountList();
          }
        });
      } else {
        this.$message.error("导入失败，没有该船员信息");
      }
    },
    leadingOut() {
      console.log("我是导出信息！！！");
    },
    download() {
      console.log("我是下载空模板！把下面的百度地址改成下载excel的地址");
      window.location = "https://www.baidu.com/";
    }
  }
};
</script>
